@require './mixins'
@require './mode'

html, body, #app
  height 100%
html, body
  padding 0
  margin 0
html.screen-fixed
  overflow hidden !important
body
  sans-serif()
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  font-size 15px
  color var(--text-color)
  background-color var(--bg-color)

.page
  font-size 1rem

a
  color var(--accent-color)
  text-decoration none

p a code
  font-weight 400
  color $accentColor

kbd
  background #eee
  border solid 0.15rem #ddd
  border-bottom solid 0.25rem #ddd
  border-radius 0.15rem
  padding 0 0.15em

blockquote
  font-size .9rem
  color #999
  border-left .25rem solid #999
  background-color var(--code-color)
  margin 0.5rem 0
  padding .25rem 0 .25rem 1rem
  & > p
    margin 0

ul, ol
  padding-left 1.2em

strong
  font-weight 600

h1, h2, h3, h4, h5, h6
  font-weight 500
  line-height 1.25

h1
  display none
  font-size 2.2rem
  &.title
    display block
h2
  font-size 1.65rem
  padding-bottom .3rem

h3
  font-size 1.35rem

p, ul, ol
  line-height 2.2
hr
  border 0
  border-top 1px solid var(--border-color)

table
  border-collapse collapse
  margin 1rem 0
  display block
  overflow-x auto

tr
  border-top 1px solid var(--border-color)
  &:nth-child(2n)
    background-color var(--code-color)

th, td
  border 1px solid var(--border-color)
  padding .6em 1em

@media (max-width: $MQMobileNarrow)
  h1
    font-size 1.9rem